<script setup>

/*定义一个子传父，传一个close，
在子页面点击关闭按钮的时候穿给父界面一个close方法，父组件监听到这个
close后就执行close方法，关闭弹窗。*/
const pageClose = () => {
  emits('close');
};
const emits = defineEmits(['close']);

</script>

<template>
    <div class="main" >
        <div class="title">
            <div class="titlename">
                <slot name="titlename">
                </slot>
            </div>
            <div class="closename" @click="pageClose"  >
            <img
              src="@/assets/images/close_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            </div>
        </div>
        <div class="line"></div>
        <div class="main-top">
            <slot name="main-top">
            </slot>
        </div>

        <div class="main-content">
            <slot name="main-content">
              
            </slot>
        </div>
        <!-- <div class="line"></div>
        <div class="button">
            <slot name="button">
            </slot>
        </div>  -->
    </div>
    
</template>

<style lang="scss"  scoped>
.main {
    background: #FFFFFF;
    box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.2);
    border-radius: 0px 0px 0px 0px;
    height: 100%;
    width: 100%;
    //44
    .title{
    width: 100%;
    height:44px ;
    padding: 12px 12px 12px 12px ;
    display: flex;
    background: #FFFFFF; 
        .titlename{      
            
            width:calc(100% / 2);
            
        }
        .closename{      
            width:calc(100% / 2);
            text-align: right;
            cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
        }
    }
    //1
    .line{
        width: 100%;
        height:1px ;
        background-color:#EBEBEB;
    }
    //85
    .main-top{
        width: calc(100% - 24px );
        height:61px ;
        margin: 12px;    
        border-bottom: 1px solid #EBEBEB;
    }
    //calc(100% - 44px - 1px - 85px);
    .main-content{
        width: calc(100% - 24px );
        height: calc(100% - 44px - 1px - 85px - 11px);
         
        margin: 0px 12px;
         
    }
    // .button{
    //     width: 100%;
    //     height:64px ;
    //     background: #FFFFFF;
    //     padding: 12px;
    //     text-align: right;
    // }
}

</style>